<%include("/common/list-top.html",{title:"数据可视化报表",css:[
ctxPath+"/zui/dist/lib/chosen/chosen.min.css",
ctxPath+"/zui/dist/lib/datetimepicker/datetimepicker.min.css",
ctxPath +"/css/visualization.css"]}){} %>
<div class="container-fluid">
    <div class="page-head-nav" id="myRsLayout-breadcrumb">
        <div class="row">
            <div class="col-xs-10">
                <ol class="breadcrumb">
                    <li><a href="${ctxPath}/workbench"><i class="icon icon-home"></i>工作台</a> </li>
                    <li>报表管理</li>
					<li><a href="${ctxPath}/visualization/visualization">数据可视化报表</a></li>
                </ol>
            </div>
        </div>
    </div>
        
     <section class="row" id="content">
     	<div id="content-left" class="col-xs-7">
     		<div class="row">
	     		 <div class="col-xs-4 conclusion">
		      	 	<p>总计划量</p>
		      	 	<p id="title-plan"><i class="icon icon-spin icon-spinner-indicator"></i></p>
		      	 </div>
		      	 <div class="col-xs-4 conclusion" >
		      	 	<p >总货物量</p>
		      	 	<p id="title-materiel"><i class="icon icon-spin icon-spinner-indicator"></i></p>
		      	 </div>
		      	 <div class="col-xs-4 conclusion">
		      	 	<p>总箱单量</p>
		      	 	<p id="title-packingList"><i class="icon icon-spin icon-spinner-indicator"></i></p>
		      	 </div>
     		</div>
     		<div class="row">
	     		<div id="scatter-border">
     		   			<div id="scatter"></div>
		       	</div>
     		</div>
     		<div class="row">
	     		<div id="sankey-border">
		       		 <div id="sankey"></div>
	      		</div>
     		</div>
     	</div>
     	<div  id="content-right" class="col-xs-5">
	     	<div class="row">
		     	<div class="col-xs-12 quick-select-data"  id="quick-select-data-title" >
		      	 	<div id="collection-title"></div>
					<div class="btn-group" data-toggle="buttons">
					  <label class="btn active" data-type="1">
					    <input type="radio" name="options" id="option1"> 近一年
					  </label>
					  <label class="btn" data-type="2">
					    <input type="radio" name="options" id="option2"> 近二年
					  </label>
					  <label class="btn" data-type="3">
					    <input type="radio" name="options" id="option3"> 近三年
					  </label>
					</div>
					<div class="btn-group quick-select-data"   data-toggle="buttons">
					  <label class="btn active disable"   data-type="all">
					    <input type="radio" name="options" id="option1" > 所有项目
					  </label>
					  <!-- <label class="btn"  data-type="doing">
					    <input type="radio" name="options" id="option2"> 正在进行
					  </label>
					  <label class="btn" data-type="done">
					    <input type="radio" name="options" id="option3"> 已经完成
					  </label> -->
					</div>
		      		 <button class="btn " id="collectionBtn" type="button"><i class="icon icon-tags"></i> 自定义数据来源</button>
		      	</div>
	     	</div>
	     	<div class="row">
	     		 <div id="bar-border">
	       		   		<div id="bar"></div>
	       		 </div>   
	     	</div>
	     	<div class="row">
	     		 <div id="pie-border">
	       		   		<div id="pie"></div>
	       		 </div>   
	     	</div>
     	</div>
     </section>   
        
        
        
	<!-- <section class="row" id="content">
      <div class="row" id="content-head">
	      	 <div class="col-xs-2 conclusion">
	      	 	<p>总计划量</p>
	      	 	<p id="title-plan"><i class="icon icon-spin icon-spinner-indicator"></i></p>
	      	 </div>
	      	 <div class="col-xs-3 conclusion" >
	      	 	<p >总货物量</p>
	      	 	<p id="title-materiel"><i class="icon icon-spin icon-spinner-indicator"></i></p>
	      	 </div>
	      	 <div class="col-xs-2 conclusion">
	      	 	<p>总箱单量</p>
	      	 	<p id="title-packingList"><i class="icon icon-spin icon-spinner-indicator"></i></p>
	      	 </div>
	      	 <div class="col-xs-5 quick-select-data" >
	      	 	<div id="collection-title"></div>
				<div class="btn-group" data-toggle="buttons">
				  <label class="btn active" data-type="1">
				    <input type="radio" name="options" id="option1"> 近一年
				  </label>
				  <label class="btn" data-type="2">
				    <input type="radio" name="options" id="option2"> 近二年
				  </label>
				  <label class="btn" data-type="3">
				    <input type="radio" name="options" id="option3"> 近三年
				  </label>
				</div>
				
				<div class="btn-group quick-select-data"   data-toggle="buttons">
				  <label class="btn active disable"   data-type="all">
				    <input type="radio" name="options" id="option1" > 所有项目
				  </label>
				  <label class="btn"  data-type="doing">
				    <input type="radio" name="options" id="option2"> 正在进行
				  </label>
				  <label class="btn" data-type="done">
				    <input type="radio" name="options" id="option3"> 已经完成
				  </label>
				</div>
	      		 <button class="btn " id="collectionBtn" type="button"><i class="icon icon-tags"></i> 自定义数据来源</button>
	      	 </div>
      </div>
      <div class="row" id="content-body">
       		<div class="col-xs-7" >
       			<div class="row" >
	       			<div id="scatter-border">
	       		   			<div id="scatter"></div>
	       		   		</div>
	       			</div>
       			<div class="row" id="sankey">
	       			<div id="sankey-border">
	       		   			<div id="sankey"></div>
	       		   	</div>
       			</div>
       		</div>
       		<div class="col-xs-5" >
       		   <div class="row"  >
       		   		<div id="bar"></div>
       		   </div>
       		   <div class="row" >
	       			<div id="pie-border">
	       		   			<div id="pie"></div>
	       		   	</div>       		   
       		   </div>
       		</div>
      </div>
	</section> -->
	
<div class="modal fade" id="collectionModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
        <h4 class="modal-title">自定义数据来源</h4>
      </div>
      <div class="modal-body">
        <div class="row">
	   		<form class="col-xs-12">
			  <fieldset>
			    <legend>选择项目</legend>
			    <div class="form-group">
					<select data-placeholder="请选择" id="chose_project" class="chosen-select form-control" tabindex="2" multiple="">
					  <option value="all">所有的</option>
					</select>
			    </div>
			  </fieldset>
			  <fieldset>
			    <legend>选择时间</legend>
			    <div class="form-group">
					<div class="input-group cho-data">
				        <span class="input-group-addon"><span class="icon-calendar"></span></span>
				        <input type="text" class="form-control form-date" placeholder="点击选择开始日期" readonly="readonly">
				        <span class="input-group-addon fix-border"><i class="icon icon-double-angle-right"></i></span>
				        <input type="text" class="form-control form-date" placeholder="点击选择结束日期" readonly="readonly">
				        <span id="clear-date-input" class="input-group-addon"><span class="icon-remove"></span></span>
				    </div>
			    </div>
			  </fieldset>
			</form>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>
        
</div>

<%include("/common/list-bottom.html",{js:[
ctxPath+"/zui/dist/lib/chosen/chosen.min.js",
ctxPath+"/zui/dist/lib/datetimepicker/datetimepicker.min.js",
ctxPath+"/zui/dist/lib/sortable/zui.sortable.min.js",
ctxPath+"/echarts/echarts.min.js",
ctxPath+"/echarts/echarts-gl.min.js",
ctxPath+"/echarts/ecStat.min.js",
ctxPath+"/echarts/dataTool.min.js",
ctxPath+"/echarts/china.js",
ctxPath+"/echarts/world.js",
"https://api.map.baidu.com/getscript?v=2.0&ak=fmDvwVsOvGTvHTgCmLNTTuUkRRsHB7Ea",
ctxPath+"/echarts/bmap.min.js",
ctxPath+"/echarts/simplex.js",
ctxPath+"/js/visualization/outline.js",
ctxPath+"/js/visualization/scatter.js",
ctxPath+"/js/visualization/pie.js",
ctxPath+"/js/visualization/sankey.js",
ctxPath+"/js/visualization/bar.js",
ctxPath+"/js/visualization/collection.js"]}){} %>
